<template>
  <div id="app">
    <div id="nav">
      <el-menu
        :default-active="activePath"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        router
        active-text-color="#ffd04b"
      >
        <el-menu-item index="/">首页介绍</el-menu-item>
        <el-submenu index="2">
          <template slot="title">饼状图</template>
          <el-menu-item index="/DoubleCakes">双饼图（定时轮询）</el-menu-item>
          <el-menu-item index="/SinglePie">单饼图（定时轮询）</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">柱状图</template>
          <el-menu-item index="/DynamicBarChart"
            >柱状图横条（分页定时轮询）</el-menu-item
          >
          <el-menu-item index="/dataZoomBar"
            >柱状图（带有滚动效果）</el-menu-item
          >
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">折线图</template>
          <el-menu-item index="/DoubleDogleg">双折线图</el-menu-item>
          <el-menu-item index="/SingleLine">单折线图</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">气泡图</template>
          <el-menu-item index="/FixedBubble">固定气泡图</el-menu-item>
          <el-menu-item index="/FloatingBubbles">浮动气泡图</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">象形图</template>
          <el-menu-item index="/Pictogram">象形图</el-menu-item>
        </el-submenu>
        <el-submenu index="7">
          <template slot="title">仪表盘图</template>
          <el-menu-item index="/Guage">仪表盘图</el-menu-item>
        </el-submenu>
        <el-submenu index="8">
          <template slot="title">甘特图</template>
          <el-menu-item index="/Custom">项目工期图</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      // activeIndex2: this.$router.path ? this.$router.path : "/", // Pictogram
    };
  },
  computed: {
    // 计算高亮效果
    activePath() {
      // 如果跳转到了商品的编辑页面 这个高亮的地址 还是返回 goodslist 也就是让商品列表保持激活
      // if (this.$route.path === "/DoubleCakes") {
      //   return "/DoubleCakes";
      // }

      // if (this.$route.path === "/DynamicBarChart") {
      //   return "/DynamicBarChart";
      // }

      return this.$route.path;
    },
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  width: 1200px;
  margin: 0 auto;
  // padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
